import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import "components"
import "styles"

Rectangle {
    id: userManagementPage
    width: 1024
    height: 600
    color: AppStyle.backgroundColor

    property bool showCreateDialog: false
    property bool showEditDialog: false
    property var selectedUser: null

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        // 标题和操作按钮
        RowLayout {
            Layout.fillWidth: true

            Text {
                text: "用户管理"
                font.pixelSize: 24
                font.bold: true
                color: AppStyle.textColor
                Layout.fillWidth: true
            }

            CustomButton {
                text: "创建用户"
                onClicked: userManagementPage.showCreateDialog = true
            }

            CustomButton {
                text: "返回"
                backgroundColor: AppStyle.secondaryColor
                onClicked: {
                    if (qmlBridge) {
                        qmlBridge.navigateToPage("Dashboard")
                    }
                }
            }
        }

        // 用户列表
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: AppStyle.cardBackgroundColor
            radius: 8
            border.color: AppStyle.borderColor
            border.width: 1

            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 10

                // 表头
                Rectangle {
                    Layout.fillWidth: true
                    height: 40
                    color: AppStyle.headerBackgroundColor
                    radius: 4

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: 10
                        spacing: 10

                        Text {
                            text: "用户名"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.preferredWidth: 120
                        }

                        Text {
                            text: "姓名"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.preferredWidth: 150
                        }

                        Text {
                            text: "角色"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.preferredWidth: 100
                        }

                        Text {
                            text: "状态"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.preferredWidth: 80
                        }

                        Text {
                            text: "最后登录"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.fillWidth: true
                        }

                        Text {
                            text: "操作"
                            font.pixelSize: 14
                            font.bold: true
                            color: AppStyle.textColor
                            Layout.preferredWidth: 120
                        }
                    }
                }

                // 用户列表
                ListView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    model: qmlBridge ? qmlBridge.getAllUsers() : []
                    
                    delegate: Rectangle {
                        width: parent.width
                        height: 50
                        color: index % 2 === 0 ? "transparent" : AppStyle.alternateRowColor

                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 10

                            Text {
                                text: modelData.username || ""
                                font.pixelSize: 12
                                color: AppStyle.textColor
                                Layout.preferredWidth: 120
                            }

                            Text {
                                text: modelData.fullName || ""
                                font.pixelSize: 12
                                color: AppStyle.textColor
                                Layout.preferredWidth: 150
                            }

                            Text {
                                text: modelData.role || ""
                                font.pixelSize: 12
                                color: AppStyle.textColor
                                Layout.preferredWidth: 100
                            }

                            Text {
                                text: modelData.isActive ? "活跃" : "禁用"
                                font.pixelSize: 12
                                color: modelData.isActive ? AppStyle.successColor : AppStyle.dangerColor
                                Layout.preferredWidth: 80
                            }

                            Text {
                                text: modelData.lastLogin || "从未登录"
                                font.pixelSize: 12
                                color: AppStyle.secondaryTextColor
                                Layout.fillWidth: true
                            }

                            RowLayout {
                                Layout.preferredWidth: 120
                                spacing: 5

                                Button {
                                    text: "编辑"
                                    font.pixelSize: 10
                                    Layout.preferredWidth: 50
                                    Layout.preferredHeight: 25
                                    onClicked: {
                                        userManagementPage.selectedUser = modelData
                                        userManagementPage.showEditDialog = true
                                    }
                                }

                                Button {
                                    text: modelData.isActive ? "禁用" : "启用"
                                    font.pixelSize: 10
                                    Layout.preferredWidth: 50
                                    Layout.preferredHeight: 25
                                    onClicked: {
                                        if (qmlBridge) {
                                            qmlBridge.toggleUserStatus(modelData.username)
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 创建用户对话框
    Rectangle {
        id: createUserDialog
        anchors.centerIn: parent
        width: 400
        height: 350
        color: AppStyle.cardBackgroundColor
        radius: 8
        border.color: AppStyle.borderColor
        border.width: 1
        visible: userManagementPage.showCreateDialog
        z: 100

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 15

            Text {
                text: "创建新用户"
                font.pixelSize: 18
                font.bold: true
                color: AppStyle.textColor
                Layout.alignment: Qt.AlignHCenter
            }

            CustomTextField {
                id: newUsernameField
                Layout.fillWidth: true
                placeholderText: "用户名"
            }

            CustomTextField {
                id: newPasswordField
                Layout.fillWidth: true
                placeholderText: "密码"
                echoMode: TextInput.Password
            }

            CustomTextField {
                id: newFullNameField
                Layout.fillWidth: true
                placeholderText: "姓名"
            }

            ComboBox {
                id: newRoleComboBox
                Layout.fillWidth: true
                model: ["ADMIN", "OPERATOR", "VIEWER"]
            }

            RowLayout {
                Layout.fillWidth: true
                spacing: 10

                CustomButton {
                    text: "创建"
                    Layout.fillWidth: true
                    onClicked: {
                        if (qmlBridge && qmlBridge.createUser(
                            newUsernameField.text,
                            newPasswordField.text,
                            newRoleComboBox.currentText,
                            newFullNameField.text
                        )) {
                            userManagementPage.showCreateDialog = false
                            // 清空字段
                            newUsernameField.text = ""
                            newPasswordField.text = ""
                            newFullNameField.text = ""
                        }
                    }
                }

                CustomButton {
                    text: "取消"
                    backgroundColor: AppStyle.secondaryColor
                    Layout.fillWidth: true
                    onClicked: {
                        userManagementPage.showCreateDialog = false
                    }
                }
            }
        }
    }

    // 背景遮罩
    Rectangle {
        anchors.fill: parent
        color: "black"
        opacity: 0.5
        visible: userManagementPage.showCreateDialog || userManagementPage.showEditDialog
        z: 50

        MouseArea {
            anchors.fill: parent
            onClicked: {
                userManagementPage.showCreateDialog = false
                userManagementPage.showEditDialog = false
            }
        }
    }
}